<template>


    <el-container class="min-h-screen bg-cover" :style="{ backgroundImage: `url('${background}')` }">
        <el-header style="height: 150px"></el-header>

        <el-container>
            <el-aside width="850px">
                <el-row style="height: 50px">
                    <span style="font-size :40px;color: azure ">{{spot.spotName}}</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    <span style="font-size: 30px;color: azure">
                    <span v-if="isNaN(this.Score)">暂无评分</span>
                        <span v-else> 评分  ：{{Score}}</span>
                    </span>
                </el-row>
                <el-row style="margin-top: 50px">
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark ">
                            <div class="block ">
                                <img :src="mainImg" style="border-radius: 30px">
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" v-for="img in imgList">
                        <div class="grid-content bg-purple">
                            <div class="demo-image__preview" style="height: 120px">
                                <el-image
                                        style="width: 100px; height: 100px"
                                        :src="img.spotImg"
                                        :preview-src-list="srcList">
                                </el-image>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="height: 20px">
                    <span style="color: azure ">{{spot.spotIntro1}}</span>
                </el-row>
            </el-aside>

            <el-container>
                <el-main>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <el-card class="box-card " style="padding: 0px">
                                    <p>{{spot.spotContent}}</p>
                                </el-card>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <el-col :span="24">
                                    <div class="grid-content bg-purple-dark">
                                        <el-card class="box-card" style="padding: 0px">
                                            <span class="text-align:left">{{spot.spotIntro2}}</span>
                                        </el-card>
                                    </div>
                                </el-col>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <el-col :span="24">
                                    <div class="grid-content bg-purple-dark">
                                        <el-card class="box-card" style="padding: 0px">

                                            <div style="height:200px;width:600px;background-color:#fff;">
                                                <div v-show="Object.keys(this.comments).length==0">
                                                    暂无评论
                                                </div>
                                                <!-- 这里的标签名称要和main.js文件中定义的组件名称保持一致 -->
                                                <happy-scroll color="rgba(0,0,0,0.5)" size="8">
                                                    <!-- 内层盒子——内容区 -->
                                                    <div class="con">
                                                        <div v-for="comt in comments">
                                                            <span>{{comt.userName}}</span>-----<span>{{comt.score}}</span>-----<span>{{comt.commentDate}}</span>
                                                            <div>
                                                                <span>{{comt.info}}</span>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </happy-scroll>
                                            </div>

                                        </el-card>
                                    </div>
                                </el-col>
                            </div>
                        </el-col>
                    </el-row>

                </el-main>

                <el-footer height="140px">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-date-picker
                                :picker-options="pickerOptions0"
                                v-model="ticketQuery.ticketDate"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>

                        <el-form-item label="种类">
                            <el-select v-model="ticketQuery.ticketVersion" placeholder="请选择种类">
                                <el-option label="成人票" value="成人票"></el-option>
                                <el-option label="儿童票" value="儿童票"></el-option>
                            </el-select>
                        </el-form-item>


                        <br/>
                        <el-form-item label="数量">
                            <el-input-number size="medium" v-model="count" :precision="0"></el-input-number>
                        </el-form-item>


                        <el-form-item>
                            <el-button type="success" @click="onSubmit">立即购买</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addCart">加入购物车</el-button>
                        </el-form-item>
                    </el-form>

                </el-footer>

            </el-container>

        </el-container>

    </el-container>
</template>

<script>
    import spot from "@/api/spot"
    import ticket from "@/api/ticket"
    import order from "@/api/order"

    import cart from "@/api/cart"

    export default {
        data() {
            return {
                Score: "",
                count: 1,
                mainImg: "",
                reticket: {
                    ticketId: "",
                    ticketStock: "",
                    ticketSpotid: "",
                    ticketPrice: "",
                    ticketVersion: "",
                    ticketDate: ""
                },
                spotId: "",
                ticketQuery: {},
                src: "",
                background: require('@/assets/backgroud/backgroud1.jpg'),
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                srcList: [],
                searchTicket: [],
                formInline: {
                    user: '',
                    region: ''
                },
                imgList: {},
                main: "",
                code: "",
                spot: {
                    spotId: "",
                    spotName: "",
                    spotImgid: "",
                    spotContent: "",
                    spotQueue: "",
                    spotIntro1: "",
                    spotIntro2: ""
                },
                comments: [],
                pickerOptions0: {
                    disabledDate(time) {
                        let faketime1 = 3600 * 24 * 1000;
                        let faketime2 = 3600 * 24 * 2 * 1000;
                        return time.getTime() > Date.now() + faketime2 || time.getTime() < Date.now() - faketime1;
                    }
                },
                addcart: {
                    cartTicketid: "",
                    cartUserid: "",
                    cartNum: ""
                },
                listOne: [],
                buy: {
                    userId: "",
                    spotName: "",
                    path: "",
                    kind: "",
                    price: "",
                    number: "",
                    dateTime: "",
                    ticketStock: "",
                }
            }

        },
        created() {
            this.init()
        },
        methods: {
            init() {
                this.getSpotId()
                this.getImgBySpotId()
                /*this.getMain()*/
                this.getSpotById()
                this.getComments()
                this.getScore()

            },
            getSpotId() {
                const id = this.$route.params.id;
                this.spotId = id;

            },
            getMain() {
                const main = this.$route.params.main;
                this.main = main
                this.src = require("@/assets/project/" + this.main)

            },
            getImgBySpotId() {
                spot.getImgsBySpotId(this.spotId).then(
                    response => {
                        this.imgList = response.data.data.imgList
                        this.code = response.data.code
                        this.createsrcList()
                    }
                )
            },
            getSpotById() {
                spot.getSpotById(this.spotId).then(
                    response => {
                        this.spot = response.data.data.spot
                        this.getMainImg()
                    }
                )
            },
            createsrcList() {
                let temp = []
                let list = Array.from(this.imgList);
                list.forEach(function (item, i) {
                    let ip = item.spotImg
                    temp.push(ip)
                })
                this.srcList = temp
            },
            getComments() {
                spot.getComments(this.spotId).then(
                    response => {
                        this.comments = response.data.data.showComments
                    }
                )
            },
            addCart() {
                this.ticketQuery.ticketSpotid = this.spotId

                if (localStorage.getItem("Authorization") == null) {
                    this.$router.push({path: '/denglu'})
                }

                ticket.findTicket(this.ticketQuery)
                    .then(
                        response => {
                            if (response.data.code === 10000) {
                                this.addTicketAndAddCart()
                            } else {
                                let userId = JSON.parse(localStorage.getItem("Authorization")).userId;
                                this.reticket = response.data.data.Ticket
                                this.addcart.cartUserid = userId;
                                this.addcart.cartNum = this.count;
                                this.addcart.cartTicketid = this.reticket.ticketId;
                                cart.add(this.addcart).then(
                                    response => {
                                        alert("加入购物车成功")
                                    }
                                )

                            }
                        }
                    )


            },
            getMainImg() {
                spot.findMainImg(this.spot.spotImgid).then(
                    response => {
                        this.mainImg = response.data.data.mainImg.spotImg

                    }
                )
            },
            addTicketAndAddCart() {
                ticket.addTicketKind(this.ticketQuery).then(
                    response => {

                        this.reticket = response.data.data.newTicket

                        let userId = JSON.parse(localStorage.getItem("Authorization")).userId;
                        this.addcart.cartUserid = userId;
                        this.addcart.cartNum = this.count;
                        this.addcart.cartTicketid = this.reticket.ticketId;


                        cart.add(this.addcart).then(
                            response => {
                                alert("加入购物车成功")
                            }
                        )
                    }
                )
            },
            getScore() {
                spot.getAverageScore(this.spotId).then(
                    response => {
                        this.Score = response.data.data.averageScore
                        console.log(this.Score)
                    }
                )
            },

            onSubmit() {
                if (localStorage.getItem("Authorization") == null) {
                    this.$router.push({path: '/denglu'})
                }
                this.ticketQuery.ticketSpotid = this.spotId
                let id = JSON.parse(localStorage.getItem("Authorization")).userId;
                this.buy.userId = id
                ticket.findTicket(this.ticketQuery).then(
                    response => {
                        if (response.data.code === 10000) {
                            ticket.addTicketKind(this.ticketQuery).then(
                                response => {
                                    this.reticket = response.data.data.newTicket
                                    this.onSubmit1()
                                })
                        }else {
                            this.reticket = response.data.data.Ticket
                            console.log(this.reticket)
                            this.onSubmit1()

                        }


                    })
            },
            onSubmit1() {
                this.buy.number = this.count
                this.buy.ticketStock = this.reticket.ticketStock
                if (this.buy.ticketStock > this.buy.number) {
                    this.buy.price = this.reticket.ticketPrice
                    this.buy.dateTime = this.reticket.ticketDate
                    this.buy.kind = this.reticket.ticketVersion
                    this.buy.spotName = this.spot.spotName
                    this.buy.path = this.mainImg
                    this.listOne.push(this.buy);
                    order.onbuy(this.listOne).then(
                        response => {
                            console.log(response)
                            this.$router.push('/order/' + response.data.data.orderId)
                        }
                    )
                } else {
                    alert("亲爱的游客，库存不足")
                }
            },
        }
    }
</script>

<style>

    .el-row {
        margin-bottom: 10px;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {

    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .el-header {
        background: rgba(34, 34, 34, 0);
        text-align: center;
    }

    .el-footer {
        background: rgba(34, 34, 34, 0.5);
        text-align: center;
    }

    .el-aside {
        background-color: rgba(34, 34, 34, 0.7);
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: rgba(34, 34, 34, 0.7);
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        padding: 0px 0;
    }

    .box-card {
        font-size: 14px;
        line-height: 50px;
        text-align: left;
        text-indent: 2em
    }

</style>

